<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title>PetriNet</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/tipsy.css" />
    <script type="text/javascript" src="js/dagre-d3.min.js"></script>
    <script src="js/d3.v4.min.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/tipsy.js"></script>
<style>
g.T3>circle {
   fill: yellow; 
}

g.T3>rect {
   fill: yellow; 
}

g.T4>circle {
   fill: green; 
}

g.T4>rect {
   fill: green; 
}

g.T5>circle {
   fill: orange; 
}

g.T5>rect {
   fill: orange; 
}

</style>
</head>
<body>
<svg width=1400 height=1000></svg>
<script type="text/javascript">
var g = new dagreD3.graphlib.Graph().setGraph({});
g.setNode('P3_0',{label:'P3_0', shape:'circle', description:'this is a source place node, it belongs thread:3', class:'T3'});
g.setNode('T0',{label:'write(3,4294967298)', shape:'rect', description:'thread: 3, position: wfb/testcases/Test.java#4', class:'T3'});
g.setEdge('P3_0', 'T0', {});
g.setNode('P3_1',{label:'P3_1', shape:'circle', description:'this is a source place node, it belongs thread:3', class:'T3'});
g.setEdge('T0', 'P3_1', {});
g.setNode('T1',{label:'start(3,4)', shape:'rect', description:'thread: 3, position: wfb/testcases/Test.java#16', class:'T3'});
g.setEdge('P3_1', 'T1', {});
g.setNode('P3_2',{label:'P3_2', shape:'circle', description:'this is a source place node, it belongs thread:3', class:'T3'});
g.setEdge('T1', 'P3_2', {});
g.setNode('T2',{label:'start(3,5)', shape:'rect', description:'thread: 3, position: wfb/testcases/Test.java#17', class:'T3'});
g.setEdge('P3_2', 'T2', {});
g.setNode('P3_3',{label:'P3_3', shape:'circle', description:'this is a source place node, it belongs thread:3', class:'T3'});
g.setEdge('T2', 'P3_3', {});
g.setNode('T4',{label:'join(3,4)', shape:'rect', description:'thread: 3, position: wfb/testcases/Test.java#18', class:'T3'});
g.setEdge('P3_3', 'T4', {});
g.setNode('P3_4',{label:'P3_4', shape:'circle', description:'this is a source place node, it belongs thread:3', class:'T3'});
g.setEdge('T4', 'P3_4', {});
g.setNode('T6',{label:'join(3,5)', shape:'rect', description:'thread: 3, position: wfb/testcases/Test.java#19', class:'T3'});
g.setEdge('P3_4', 'T6', {});
g.setNode('P3_5',{label:'P3_5', shape:'circle', description:'this is a source place node, it belongs thread:3', class:'T3'});
g.setEdge('T6', 'P3_5', {});
g.setNode('P5_0',{label:'P5_0', shape:'circle', description:'this is a source place node, it belongs thread:5', class:'T5'});
g.setEdge('T2', 'P5_0', {});
g.setNode('T5',{label:'write(5,4294967298)', shape:'rect', description:'thread: 5, position: wfb/testcases/Test.java#13', class:'T5'});
g.setEdge('P5_0', 'T5', {});
g.setNode('P5_1',{label:'P5_1', shape:'circle', description:'this is a source place node, it belongs thread:5', class:'T5'});
g.setEdge('T5', 'P5_1', {});
g.setEdge('P5_1', 'T6', {});
g.setNode('P4_0',{label:'P4_0', shape:'circle', description:'this is a source place node, it belongs thread:4', class:'T4'});
g.setEdge('T1', 'P4_0', {});
g.setNode('T3',{label:'write(4,4294967298)', shape:'rect', description:'thread: 4, position: wfb/testcases/Test.java#8', class:'T4'});
g.setEdge('P4_0', 'T3', {});
g.setNode('P4_1',{label:'P4_1', shape:'circle', description:'this is a source place node, it belongs thread:4', class:'T4'});
g.setEdge('T3', 'P4_1', {});
g.setEdge('P4_1', 'T4', {});
var render = new dagreD3.render();
var svg = d3.select("svg"), inner = svg.append("g");
var zoom = d3.zoom().on("zoom", function() {inner.attr("transform", d3.event.transform);});
svg.call(zoom);
var styleTooltip = function(name, description) {return "<p class='name'>" + name + "</p><p class='description'>" + description + "</p>";};
render(inner, g);
inner.selectAll("g.node")
  .attr("title", function(v) { return styleTooltip(v, g.node(v).description) })
  .each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }); });
var initialScale = 0.75;
svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
</script>
</body>
</html>
